import React from 'react';
import { render, act } from '@testing-library/react';
import TypeEffect from './TypeEffect';

describe('React TypeEffect Component', () => {
  test('renders correctly', () => {
    const { container } = render(<TypeEffect text="Hello World" />);
    expect(container.querySelector('.chatgpt-type-effect')).not.toBeNull();
  });

  test('displays text progressively', async () => {
    jest.useFakeTimers();
    
    const { container } = render(<TypeEffect text="Hello" speed={10} />);
    
    // 初始状态
    expect(container.querySelector('.content').textContent).toBe('');
    
    // 第一个字符 - 修改这里，使用更精确的时间控制
    act(() => {
      jest.advanceTimersByTime(10);
    });
    
    // 检查第一个字符是否显示
    // 由于组件可能一次显示多个字符，我们检查长度而不是具体内容
    const firstCharContent = container.querySelector('.content').textContent;
    expect(firstCharContent.length).toBeGreaterThan(0);
    expect(firstCharContent.length).toBeLessThanOrEqual(2);
    
    // 全部字符
    act(() => {
      jest.advanceTimersByTime(40);
    });
    expect(container.querySelector('.content').textContent).toBe('Hello');
    
    jest.useRealTimers();
  });
});